import React, { useEffect, useState } from 'react'
import { Button, Modal, Image, Space, message, Table,Tag,Layout} from 'antd';
import { useNavigate } from 'react-router-dom'
import axios from 'axios';
import { Navigate } from 'react-router-dom';
import moment from 'moment'
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
export default function Index() {
    const [loginUser, setLoginUser] = useState(JSON.parse(localStorage.getItem("loginUser")))
    const [originData, setOriginData] = useState(0);
    const [cancelModal, setCancelModal] = useState(false);
    const [cancelID, setCancelID] = useState();
    const [cancelGift, setCancelGift] = useState();
    const { Header, Sider, Content } = Layout;
    const navigate = useNavigate();
    useEffect(() => {
        message.destroy();
        axios.get("http://localhost:8080/qryGiftHistory?id=" + loginUser.id).then(resp => {
            console.log(resp);
            setOriginData(resp.data.data)
        }).catch(err => {
            console.log(err);
            message.error("请求失败!", 1)
        })
        return () => {
        };
    }, []);
    const showCalcelModal = (id,giftid) => {
        console.log("取消订单:",id);
        setCancelModal(true)
        setCancelID(id)
        setCancelGift(giftid)
    }
    const cancelModalOK  = () => {
        axios.post("http://localhost:8080/cancelGiftBuy",{id:cancelID,userid:loginUser.id,giftId:cancelGift}).then(resp=>{
            setCancelModal(false)
            if (resp.data.state=="0") {
                message.success(resp.data.message,1)
                setTimeout(() => {
                    navigate('/userMenu/*')
                    window.location.reload();
                }, 300);
            }
        })

    }
    const columns = [
        {
            title: '礼品名称',
            dataIndex: 'giftname',
            key: 'giftname',
        },
        {
            title: '图片',
            dataIndex: 'photo',
            key: 'photo',
            render: (text, record) => (
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', }} key="photofile">
                    <Image
                        width={100}
                        height={100}
                        src={`http://localhost:8080/getGiftPhoto?id=${record.giftid}`}
                    />
                </div>
            ),
        },
        {
            title: '花费积分',
            dataIndex: 'giftprice',
            key: 'giftprice',
            sorter: (a, b) => a.giftprice - b.giftprice,
        },
        {
            title: '订单状态',
            dataIndex: 'state',
            key: 'state',
            filters: [
                {
                  text: '待发货',
                  value: 0,
                },
                {
                  text: '已取消',
                  value: 1,
                },
                {
                    text: '已发货',
                    value: 2,
                  }
            ],
            render: (text, record) => (
                < >
                    {
                        record.state == 0 ?
                            <Tag color="lime">等待平台发货</Tag> :
                            record.state == 1 ?
                                <Tag color="#f50">您已取消</Tag> :
                                <>
                                
                                <Tag color="blue">{`快递单号:${record.expressid}`}</Tag>
                                </>
                                
                    }
                </>


            ),
            onFilter: (value, record) => record.state === value,
        },
        {
            title: '兑换时间',
            key: 'createtime',
            dataIndex: 'createtime',
            sorter: (a, b) => Number(a.createtime) - Number(b.createtime),
            render: (text, record) => (
                // <span>{record.createtime}</span>
                <span>{ moment(Number(record.createtime)).format('YYYY-MM-DD HH:mm:ss')}</span>
            ),
        },
        {
            title: 'Action',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    {
                        record.state == 0 ?
                        <Button type="primary" danger onClick={() => {showCalcelModal(record.id,record.giftid)}}>取消兑换</Button>:<></>
                    }
                    
                </Space>
            ),
        },
    ];
    return (
        <Content className="animate__animated animate__fadeIn">
            <Table columns={columns} dataSource={originData} pagination={{pageSize:4}}/>
            <Modal title="警告" visible={cancelModal} onOk={cancelModalOK} onCancel={() => {setCancelModal(false)}}>
                <p>取消后将退还积分且订单无法恢复!</p>
             </Modal>
        </Content>
    )
}
